//引入less变量文件
@import "./common.less";
// 支持运算
// 后代组件可以嵌套
//less可以定义变量,@表示
@bigSize:100px;
.box{
    background-color: pink;
    width: @bigSize;
    height: @bigSize;
    border: 1px solid #c45454;
    margin: 20px;
}
.box{
    // 子代选择器加>
    >.text1{
        color: aqua;
    }
    // 后代组件之间嵌套即可
    .text2{
        color: blue;
    }
    // 伪类选择器，可以不加&，&代表父选择器的名字可以做拼接
    :hover{
        color: red;
    }
    &:hover{
        color: red;
    }
    // &符号可以代替父选择器，此时用的付选择器是box
    &_header{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
        &_center{
        width: 100px;
        height: 100px;
        background-color: gray;
    }
        &_bottom{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    //css变量
//         :root{
// --mainColor:red;
// }
--mainColor:green;
    .box3{
        background-color: var(--mainColor);
        width: 100px;
        height: 100px;
    }

}
